<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}"></title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/app-style.css">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="/">文件管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/directory">目录管理</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/admin">账号管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="/swagger-ui.html" target="_blank">REST API 调用接口</a>
            </li>
            <a class="nav-link" href="/logout">退出系统</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" th:action="@{/search}">
            <input class="form-control mr-sm-2" type="search" placeholder="文件名" name="filename" id="filename">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>

<div class="table-responsive">

    <div class="alert alert-success" th:if="${message}">
        <h2 th:text="${message}"/>
    </div>

    <div class="m-box">
        <div class="box-head">
            <strong class="box-title"> 成员管理</strong>
            <!-- 管理员 0  才可以添加用户 -->
            <button type="button" class="btn btn-success btn-sm pull-right" data-toggle="modal"
                    data-target="#addMemberDialogModal"><i class="fa fa-user-plus" aria-hidden="true"></i> 添加成员
            </button>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="addMemberDialogModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">新增人员</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="table-responsive" style="text-align: center">
                        <form class="form-horizontal" method="POST" th:action="@{'admin/addUser'}">
                            <table class="table table-hover">
                                <tr>
                                    <td align="right">用户名:</td>
                                    <td>
                                        <div class="template-input-icon-container">
                                            <i class="fa fa-user"></i>
                                            <input type="text" class="form-control" placeholder="用户名"
                                                   required="required"
                                                   id="username" name="username"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">密 码:</td>
                                    <td>
                                        <div class="template-input-icon-container">
                                            <i class="fa fa-lock"></i>
                                            <input type="password" class="form-control" placeholder="密码"
                                                   required="required"
                                                   id="password" name="password"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">用户组:</td>
                                    <td>
                                        <div class="template-input-icon-container">
                                            <i class="fas fa-users"></i>
                                            <input type="text" class="form-control"
                                                   placeholder="用户组" required="required"
                                                   id="userGroup" name="userGroup"/>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">用户类别:</td>
                                    <td>
                                        <select id="userType" name="userType" class="select custom-select">
                                            <option th:each="entry : ${userAuthorityMap}"
                                                    th:value="${entry.key}"
                                                    th:text="${entry.value}">用户类别
                                            </option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <input type="hidden" th:name="${_csrf.parameterName}"
                                   th:value="${_csrf.token}"/>
                            <input type="submit" value="保存" class="btn btn-success"/>
                        </form>
                    </div>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>

    <table class="table table-striped table-hover">
        <thead class="thead-light">
        <tr>
            <th>用户名</th>
            <th>分组</th>
            <th>用户类别</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="user : ${users}">
            <form th:action="@{/admin/deleteUser}" th:method="DELETE">
                <td>
                    <span th:text="${user.username}"></span>
                </td>
                <td>
                    <ul class="custom-list">
                        <li th:each="usergroup:${user.groups}">
                            <span th:text="${usergroup}"></span>
                        </li>
                    </ul>
                </td>
                <td>
                    <ul class="custom-list">
                        <li th:each="userAuthority:${user.authorities}">
                            <select id="authority" name="authority" class="select custom-select"
                                    readonly="true" disabled="disabled">
                                <option th:each="entry : ${userAuthorityMap}"
                                        th:value="${entry.key}"
                                        th:text="${entry.value}"
                                        th:selected="(${entry.key} == ${userAuthority})">用户类别
                                </option>
                            </select>
                        </li>
                    </ul>
                </td>
                <td>
                    <div class="input-group">
                        <a th:href="@{'/admin/editUser/'+${user.id}}"
                           class="btn btn-primary"><i class="fas fa-edit"></i></a>
                        <input type="hidden" id="userId" name="userId" th:value="${user.id}"/>
                        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                        <input type="submit" value="&#xf2ed" class="btn btn-danger far fa-trash-alt"/>
                    </div>
                </td>
            </form>
        </tr>
        </tbody>
    </table>
</div>
<footer>
    <p>2018 &copy; Quick Doc 快捷文档共享</p>
</footer>

</body>
</html>